<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<template>
  <div style="height: 100vh" class="row justify-between background">
    <div class="col-6 text-center row items-center justify-center">
      <div>
        <h3 class="text-white">Whooops!</h3>
        <h6 class="text-blue-grey-4 text-gradient">sorry, the page you are looking for does not exist.</h6>

        <div>
          <q-btn color="primary" rounded unelevated style="width: 200px" @click="router.push('/')">返回首页</q-btn>
        </div>
      </div>
    </div>
    <div class="col-6">
      <img src="/404.png" style="width: 100%; margin-top: 15vh" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.background {
  background-image: linear-gradient(146deg, #9932cc 39.9%, #fff 40%);
  // background-size: 80% 80%;
}
</style>
